<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/mall-common :: common_head(~{::title},~{::link},~{::script})">
  <title>网上图书商城</title>
  <link rel="stylesheet" href="/styles/mall/goods-detail.css">
  <script src="/javascript/mall/goods-detail.js" type="text/javascript"></script>
</head>
<body>
<div th:replace="common/mall-common::mall-header"></div>

<div id="header"></div>
<div class="mall-body">
  <div class="base-info-area">
    <!--轮播-->
    <div id="homeBanner" class="carousel slide goods-banner">
      <div class="carousel-indicators">
        <button th:each="item,info:${images}" type="button" data-bs-target="#homeBanner"
                style="box-shadow: 0 0 10px rgba(238,8,8,0.5);height: 4px !important;border: 1px;"
                th:data-bs-slide-to="${info.index}" th:class="${info.index == 0 ? 'active' : ''}"></button>
      </div>
      <div class="carousel-inner">
        <div th:class="'carousel-item' + ${info.index == 0 ? ' active' : ''}" th:each="item,info:${images}">
          <img th:src="${item}" class="goods-banner-img">
        </div>
      </div>
      <button class="carousel-control carousel-control-prev" type="button" data-bs-target="#homeBanner"
              data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control carousel-control-next" type="button" data-bs-target="#homeBanner"
              data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

    <div class="base-info">
      <div class="goods-name" th:text="${books.name}"></div>
      <div class="goods-property">
        <div class="property-name">图书编号：</div>
        <div class="property-value" th:text="${books.booksNo}"></div>
      </div>
      <div class="goods-property">
        <div class="property-name">作者：</div>
        <div class="property-value" th:text="${books.author}"></div>
      </div>
      <div class="goods-property">
        <div class="property-name">出版社：</div>
        <a class="property-value"  th:text="${books.belongpublish.name}" th:href="'/publish-index?id=' + ${books.belongpublish.id}"></a>
      </div>

      <div class="price-area">
        <div class="original-price" th:text="${selectedSku.originalPrice} + '元'"></div>
        <div class="current-price" th:text="${selectedSku.currentPrice} + '元'"></div>
        <div class="actions-area">
          <a type="button" class="btn btn-outline-primary btn-lg action-btn"
             th:href="'/my-cart?addCartSkuId=' + ${selectedSku.id}">加入购物车</a>
          <a type="button" class="btn btn-outline-success btn-lg action-btn"
             th:href="'/order-confirm?fromType=buy&skuId=' + ${selectedSku.id}">立即购买</a>
          <a type="button" class="btn btn-primary edit-btn"
             th:href="'https://'+${selectedSku.website}" target="_blank">阅读</a>
        </div>
      </div>
    </div>

  </div>

  <div class="goods-description-area">
    <div class="title">商品详情</div>
    <div class="description-content" th:utext="${books.booksDescription.booksDescriptiont}"></div>
  </div>


  <div class="goods-description-area">
    <div class="title">进行评价</div>
    <button type="button" class="btn btn-outline-primary neumall-data-add-btn">提交评价</button>
  </div>

</div>

<div th:replace="common/mall-common::mall-footer"></div>
<!--模态框-->
<div class="modal fade" id="neumall-data-edit-modal" tabindex="-1" style="z-index: 999999">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">评价</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form action="/addCom" method="post">
        <input id="shipping-address-id" type="hidden" name="id" value=""/>
        <div class="modal-body">
          <div class="mb-3 row">
            <label for="booksNo" class="col-sm-2 col-form-label">图书号</label>
            <div class="col-sm-10">
              <input class="form-control" id="booksNo" name="booksNo">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="bookName" class="col-sm-2 col-form-label">图书名称</label>
            <div class="col-sm-10">
              <input class="form-control" id="bookName" name="bookName">
            </div>
          </div>

          <div class="mb-3 row">
            <label for="com" class="col-sm-2 col-form-label">评价</label>
            <div class="col-sm-10">
              <input class="form-control" id="com" name="com">
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-success">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>
</body>
</html>